<template>
<i-form :model="form" :label-width="80" @submit.native.prevent="onSubmit()" :rules="rules" ref="new-live-form">
  <i-row :gutter="8">
    <i-col :span="18">
      <i-card style="min-height: 500px">
        <i-form-item label="推荐">
          <i-switch v-model="form.featured">
            <span slot="open">是</span>
            <span slot="close">否</span>
          </i-switch>
        </i-form-item>
        <i-form-item label="封面" prop="cover">
          <image-uploader :path.sync="form.cover"></image-uploader>
        </i-form-item>
        <i-form-item label="自动生成课程缩略图" prop="autoGeneratingAvatar">
          <i-switch v-model="form.autoGeneratingAvatar">
            <span slot="open">是</span>
            <span slot="close">否</span>
          </i-switch>
          <image-uploader class="margin-top-10" :path.sync="form.avatar" v-show="!form.autoGeneratingAvatar"></image-uploader>
        </i-form-item>
        <i-form-item label="标题" prop="title">
          <i-row>
            <i-col :span="16">
              <i-input v-model="form.title" placeholder="复数和向量"></i-input>
            </i-col>
            <i-col :span="8" style="text-align: right">
              <author :value.sync="form.createdById" ref="author"></author>
            </i-col>
          </i-row>
        </i-form-item>
        <i-form-item label="副标题" prop="subtitle">
          <i-input v-model="form.subtitle" placeholder="奥赛数学系列直播 第3讲"></i-input>
        </i-form-item>
        <i-row>
          <i-col :span="12">
            <i-form-item label="开始时间" prop="startTime">
              <i-date-picker v-model="form.startTime" type="datetime" placeholder="选择日期和时间" style="width:100%"></i-date-picker>
            </i-form-item>
          </i-col>
          <i-col :span="12">
            <i-form-item label="结束时间" prop="endTime">
              <i-date-picker v-model="form.endTime" type="datetime" placeholder="选择日期和时间" style="width:100%"></i-date-picker>
            </i-form-item>
          </i-col>
        </i-row>

        <i-form-item label="直播源" prop="source">
          <i-input v-model="form.source" placeholder="来源，一般是以m3u8结尾的url，例如：https://logos-channel.scaleengine.net/logos-channel/live/biblescreen-ad-free/playlist.m3u8"></i-input>
        </i-form-item>
        <i-form-item label="简介">
          <i-input type="textarea" :rows="5" v-model="form.description" placeholder="老师告诉你能学到什么？"></i-input>
        </i-form-item>
        <i-form-item label="附件" class="attachments" style="min-height:200px" prop="files" v-show="form.files && form.files.length">
          <uploader :type="0" :files.sync="form.files" text="上传文档或视频" ref="uploader"></uploader>
        </i-form-item>
      </i-card>
    </i-col>
    <i-col :span="6">
      <i-card class="margin-bottom-10">
        <p slot="title">
          <i-icon type="navicon-round"></i-icon>
          <span>年级、科目</span>
        </p>
        <i-form-item class="no-label margin-top-10" prop="grade">
          <grades :value.sync="form.grade"></grades>
        </i-form-item>
        <i-form-item class="no-label" prop="subject">
          <subjects :value.sync="form.subject"></subjects>
        </i-form-item>
      </i-card>
      <i-card>
        <p slot="title">
          <i-icon type="paper-airplane"></i-icon>
          <span>发布</span>
        </p>
        <i-form-item label="知识点" class="no-label" prop="tags">
          <tag-selector label="知识点" :values.sync="form.tags" :subject="form.subject" :grade="form.grade"></tag-selector>
        </i-form-item>
        <i-button html-type="submit" type="primary" long>保存</i-button>
        <i-button class="margin-top-8" html-type="reset" long>取消</i-button>
      </i-card>
    </i-col>
  </i-row>
</i-form>
</template>

<script>
import Editions from '../components/filters/Editions'
import Grades from '../components/filters/Grades'
import Subjects from '../components/filters/Subjects'
import TagSelector from '../components/tag-selector'
import Uploader from '../components/uploader'
import ImageUploader from '../components/uploader/Image'
import Author from '../components/author'
import { mapGetters, mapActions } from 'vuex'
export default {
  components: {
    Editions,
    Subjects,
    Grades,
    TagSelector,
    Uploader,
    ImageUploader,
    Author
  },
  data() {
    return {
      form: {
        id: null,
        subject: null,
        grade: null,
        subtitle: null,
        title: null,
        description: null,
        startTime: null,
        endTime: null,
        tags: [],
        files: [],
        createdById: null,
        cover: null,
        featured: false,
        autoGeneratingAvatar: true
      },
      rules: {
        title: {
          required: true,
          message: '请输入标题',
          trigger: 'blur'
        },
        cover: {
          required: true,
          message: '请上传直播封面，主要用于宣传',
          trigger: 'blur'
        },
        subtitle: {
          required: true,
          message: '请输入副标题',
          trigger: 'blur'
        },
        startTime: {
          required: true,
          type: 'date',
          message: '请输入开始时间',
          trigger: 'blur'
        },
        endTime: {
          required: true,
          type: 'date',
          message: '请输入结束时间',
          trigger: 'blur'
        },
        source: {
          required: true,
          type: 'url',
          message: '请输入合法的直播源',
          trigger: 'blur'
        },
        grade: {
          required: true,
          type: 'number',
          message: '请选择年级',
          trigger: 'blur'
        },
        subject: {
          required: true,
          type: 'number',
          message: '请选择科目',
          trigger: 'blur'
        },
        tags: {
          type: 'array',
          required: true,
          message: '必填项'
        }
      }
    }
  },
  computed: {
    ...mapGetters({
      uploadUrl: 'uploadUrl',
      extensions: 'extensions'
    })
  },
  methods: {
    ...mapActions({
      saveLive: 'saveLive',
      getLive: 'getLive'
    }),
    onSubmit() {
      let that = this
      that.$refs['new-live-form'].validate(valid => {
        if (!valid) return
        that.saveLive({
          form: this.form,
          callback() {
            that.$router.push({ path: '/admin/lives/index' })
          }
        })
      })
    },
    uploaded(res, file) {
      // console.log(file)
      this.form.files = this.form.files.concat(res)
    },
    init() {
      let that = this
      var init = function(data) {
        var form = that.form
        form.id = data && data.id
        form.subject = data && data.subject
        form.grade = data && data.grade
        form.subtitle = data && data.subtitle
        form.source = data && data.source
        form.startTime = data && data.startTime
        form.endTime = data && data.endTime
        form.title = data && data.title
        form.cover = data && data.cover
        form.featured = data && data.featured

        that.$refs.uploader.setDefaultFiles(data && data.files)
        if (data && data.createdBy) {
          that.$refs.author.set(data.createdBy)
          form.createdById = data.createdBy.id
        }
        form.description = data && data.description
        form.tags = (data && data.tags) || []
      }
      var id = this.$route.params.id
      if (id) {
        that.getLive({
          id: id,
          callback(data) {
            init(data)
          }
        })
      } else {
        init()
      }
    }
  },
  mounted() {
    // this.init()
  },
  activated() {
    this.init()
  }
}
</script>

<style lang="less" scoped>
</style>
